
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>to my goddess</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!--<meta itemprop="image" content="./images/fenxiang.png" />-->
    <!-- <embed src="https://m10.music.126.net/20200303130223/c7789dea4bfa153fdd7c77c055627dab/ymusic/cd40/789c/4e77/e4d21eb140f2ecebf43ae2e68750111f.mp3" hidden="true" autostart="true" loop="false" /> -->
    <!-- <bgsound src="https://m10.music.126.net/20200303130223/c7789dea4bfa153fdd7c77c055627dab/ymusic/cd40/789c/4e77/e4d21eb140f2ecebf43ae2e68750111f.mp3" autostart=true loop=infinite></bgsound> -->
    <style>
        html {
            height: 100%;
        }
        body {
            overflow: hidden;
            font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
            letter-spacing: 1.2px;
            margin: 0;
            background: linear-gradient(to top, #3f96bf, #c8e9db);
            background: -webkit-linear-gradient(to top, orange, blue);
        }
        a {
            color: #ebf7f4;
        }
        .body--ready {
            background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 0%);
            background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 0%);
            background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 0%);
            background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 0%);
            background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 0%);
        }
         .body--ready1 {
            background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 30%);
            background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 30%);
            background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 30%);
            background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 30%);
            background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 30%);
        }
        .body--ready2 {
            background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 60%);
            background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 60%);
            background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 60%);
            background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 60%);
            background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 60%);
        }
        .body--ready3 {
            background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 90%);
            background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 90%);
            background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 90%);
            background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 90%);
            background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 90%);
        }

        .body--ready4 {
            background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
            background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
            background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
            background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
            background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
        }                
/*         .text {
    position: fixed;
    bottom: 100px;
    text-align: center;
    width: 100%;
} */
        .current_time {
            margin: 227px auto;
            color: white;
            font-size: 63px;
            font-family: YouYuan;
        }
        img#logo {
            width: 128px;
            background-size: cover;
            border-radius: 200px;
            box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72);
            border: 3px solid #00a0ff;
            opacity: 1;
            margin: 0 auto;
            margin-top: 45px;
            margin-bottom: 20px;
            transition: all 1.0s;
        }
        #logo:hover {
            box-shadow: 0 0 10px #fff;
            -webkit-box-shadow: 0 0 19px #fff;
            transform: rotate(360deg);
            -ms-transform: rotate(360deg); /* IE 9 */
            -moz-transform: rotate(360deg); /* Firefox */
            -webkit-transform: rotate(360deg); /* Safari 和 Chrome */
            -o-transform: rotate(360deg); /* Opera */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
        .cs {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            position: absolute;
            text-align: center;
        }
         .music {
            width: 100%;
            height: 100%;
            margin: 0 auto;          
            position: absolute;
            text-align: center;
        }
        .text {
            position: fixed;
            bottom: 80px;
            text-align: center;
            width: 100%;
            font-weight: bold;
        }
        .text-right {
            position: fixed;
            bottom: 50px;
            text-align: right;
            width: 100%;
            font-weight: bold;
        }
    </style>

</head>

<body>
<!--更改为你女朋友的头像-->
<div class="cs">
    <img src="a.jpeg" id="logo">
</div>
<div class="music">
<!--     <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=282 height=86 src="https://music.163.com/outchain/player?type=2&id=34341360&auto=1&height=66"></iframe> -->
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="https://music.163.com/outchain/player?type=2&id=34341360&auto=1&height=32"></iframe>
    <!-- <audio src="https://m10.music.126.net/20200303153507/9f2b051daa4e5eb26da8ecfb753d732e/ymusic/cd40/789c/4e77/e4d21eb140f2ecebf43ae2e68750111f.mp3" autoplay loop>您的浏览器不支持 audio 标签。</audio> -->
    <!-- <audio loop src="https://m10.music.126.net/20200303153507/9f2b051daa4e5eb26da8ecfb753d732e/ymusic/cd40/789c/4e77/e4d21eb140f2ecebf43ae2e68750111f.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio> -->
</div>
<span class="text current_time"><span id="hour">00</span><span id="dot">:</span><span id="min">00</span> </span>
<p class="text" style="color: #FFCCCC;">
    倩，你已经住在我心里<br><span id="span_dt_dt"></span><br>
    晚点遇见你没有关系,但愿余生都是你!
</p>

<script language="javascript">
    function show_date_time() {
        window.setTimeout("show_date_time()", 1000);
        BirthDay = new Date("12/24/2019 00:00:00");//这个日期是可以修改的
        today = new Date();
        timeold = (today.getTime() - BirthDay.getTime());
        sectimeold = timeold / 1000
        secondsold = Math.floor(sectimeold);
        msPerDay = 24 * 60 * 60 * 1000
        e_daysold = timeold / msPerDay
        daysold = Math.floor(e_daysold);
        e_hrsold = (e_daysold - daysold) * 24;
        hrsold = Math.floor(e_hrsold);
        e_minsold = (e_hrsold - hrsold) * 60;
        minsold = Math.floor((e_hrsold - hrsold) * 60);
        seconds = Math.floor((e_minsold - minsold) * 60);
        span_dt_dt.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
        var now = new Date();
        hour.innerHTML=now.getHours();
        var minTxt = now.getMinutes();
        min.innerHTML= minTxt<10?'0'+minTxt:minTxt;
        if(seconds%2==0){
            dot.style.opacity=0;
        }else{
            dot.style.opacity=1;
        }
    }
    show_date_time();
</script>
<!--音乐可改-->
<!-- <audio autoplay="autoplay" loop="loop">
    <source src="http://m10.music.126.net/20180509183512/5ae461e9a42675d782840bf139b05c60/ymusic/e492/ea7a/6a27/8799d19e52d9bbe3ae15febb03d7efdb.mp3" type="audio/mpeg">
</audio> -->
</body>
</html>

